import React, { useState, useEffect, useCallback } from 'react';
import { useLocation, useHistory } from 'react-router-dom'
import { getSofCashFindDeduct } from "../../api";
import AddDeduction from './components/AddDeduction'
import { DeductionAll } from './style'
import { message, PageHeader, Table, Button } from 'antd'
/**
 * @description: 保证金押金 操作-》扣款列表
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-02） 写注释
 */
const Deduction = () => {
    const location = useLocation()
    const history = useHistory()
    const [listData, setListData] = useState([])
    const [addDeductionShow, setAddDeductionShow] = useState(false)
    const listFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofCashFindDeduct({ cashId: location.state.cashId })
                if (code === '20000') {
                    setListData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [location.state],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //添加扣款
    const handleAddDeduction = () => {
        setAddDeductionShow(true)
    }
    const columns = [
        {
            title: '编号',
            render: (text, recode, index) => <span> {index + 1} </span>
        },
        {
            title: '扣款原因',
            dataIndex: 'deductCause'
        },
        {
            title: '扣款时间',
            dataIndex: 'deductDate'
        },
        {
            title: '扣款金额',
            dataIndex: 'deductMoney'
        },
        {
            title: '备注',
            dataIndex: 'remark'
        },
        {
            title: '操作',
            render: (text, recode) => <Button type='primary'>删除</Button>
        }
    ]
    return <DeductionAll>
        <PageHeader
            className="site-page-header"
            onBack={() => history.go('-1')}
            title="扣款列表"
            extra={[
                <Button key="1" type="primary" onClick={() => handleAddDeduction()} >
                    添加扣款
                </Button>,
            ]}
        />
        <Table
            dataSource={listData}
            columns={columns}
            rowKey='id'
            size='small'
            bordered
            pagination={false}
        />
        <AddDeduction
            setAddDeductionShow={setAddDeductionShow}
            addDeductionShow={addDeductionShow}
            cashId={location.state.cashId}
            conNo={location.state.conNo}
            listFun={listFun}
        />
    </DeductionAll>
}

export default Deduction